<template>
  <h2>子级组件</h2>
  <h4>msg:{{ msg }}</h4>
  <button @click="update">更新按钮</button>
</template>

<script>
import {
  defineComponent,
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
} from "vue";
export default defineComponent({
  name: "Child",
  //vue2生命周期
  beforeCreate() {
    console.log("vue2beforeCreate");
  },
  created() {
    console.log("vue2created");
  },
  beforeMount() {
    console.log("vue2beforeMount");
  },
  mounted() {
    console.log("vue2mounted");
  },
  beforeUpdate() {
    console.log("vue2beforeUpdate");
  },
  updated() {
    console.log("vue2updated");
  },
  //vue2中的这两个改名了
  beforeUnmount() {
    console.log("vue2beforeUnmount");
  },
  unmounted() {
    console.log("vue2unmounted");
  },
  setup() {
    const msg = ref("abc");
    const update = () => {
      msg.value += "===";
    };
    console.log("vue3");
    onBeforeMount(()=>{
        console.log('vue3onBeforeMount');
    })
    onMounted(()=>{
        console.log('vue3onMounted');
    })
    onBeforeUpdate(()=>{
        console.log('vue3onBeforeUpdate');
    })
    onUpdated(()=>{
        console.log('vue3onUpdated');
    })
    onBeforeUnmount(()=>{
        console.log('vue3onBeforeUnmount');
    })
    onUnmounted(()=>{
        console.log('vue3onUnmounted');
    })
    return {
      msg,
      update,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
